<template>
  <div class="dt-chat-system">
    <PublicEmpty v-if="notice_list.length == 0" :ishowImage="true" />
    <div class="dt-chat-table" v-else>
      <el-table :data="notice_list" :fit="true" :responsive="true" border>
        <el-table-column prop="groupName" label="标题" min-width="328"> </el-table-column>
        <el-table-column prop="message" label="内容" min-width="448"> </el-table-column>
        <el-table-column prop="createTime" label="时间" min-width="188"> </el-table-column>
        <el-table-column label="操作" min-width="112">
          <template slot-scope="scope">
            <div v-show="scope.row.status === 0">
              <el-button type="text" @click="inviteNotice(scope.row, 1)" :loading="scope.row.is_loading">同意</el-button>
              <el-button type="text" @click="inviteNotice(scope.row, 2)" :loading="scope.row.is_loading">拒绝</el-button>
            </div>
            <div v-show="scope.row.status === 1">
              <el-button type="text" disabled size="small">已同意</el-button>
            </div>
            <div v-show="scope.row.status === 2">
              <el-button type="text" disabled size="small">已拒绝</el-button>
            </div>
            <div v-show="scope.row.status > 2">
              <el-button type="text" disabled size="small">--</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="public-page" v-if="total_record > 20">
      <el-pagination
        class="pagination"
        v-if="total_record > 20"
        :current-page="page"
        :page-size="20"
        :total="total_record"
        layout="total, prev, pager, next, jumper"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      uid: this.$tools.getDecrypt(this.$store.state.uid),
      group_id: this.$route.params.group_id,
      notice_list: [],
      total_record: 0,
      mess_type_url: [null, '/skb/img/chat-mess.png', '/skb/img/chat-sys.png'],
      page: parseInt(this.$route.query.page || 1),
      /***************消息提示*****************************/
      msgTime: 0,
      msgTitle: '数科帮网页版',
      msgTimer: null,
      groupName: ''
    }
  },
  methods: {
    // queryData() {
    //   var data = {
    //     page: this.page
    //   }
    //   this.$router.push('/main/#/pc?tab=chat&groupId=0&' + this.$qs.stringify(data))
    // },
    handlePageChange(val) {
      this.page = val
      // this.queryData()
      this.getNoticeList()
    },
    // 处理进群邀请
    inviteNotice(item, handle_type) {
      item.is_loading = true
      var data = [{ userId: this.uid, id: item.id, handleType: handle_type }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/handleNotice'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              item.is_loading = false
              item.status = handle_type
              this.$message({
                message: data.message,
                type: 'success',
                duration: 2000,
                onClose: () => {}
              })
              if (handle_type === 1) {
                this.$router.push(`/main/#/pc?tab=chat&groupId=${item.groupId}`)
                this.$emit('getGroupList')
              } else {
                this.getNoticeList()
              }
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {
                  this.getNoticeList()
                }
              })
            }
          })
        })
        .catch((error) => {})
    },
    //重新获取通知列表
    getNoticeList() {
      var data = [{ userId: this.uid, page: this.page, pageSize: '20' }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/noticeList'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)

      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.notice_list = data.data.items
              this.total_record = data.data.total_record
              this.notice_list.forEach((item) => {
                item.is_loading = false
              })
            }
          })
        })
        .catch((error) => {})
    }
  },
  mounted() {
    // this.$root.$on('getNoticeList', this.getNoticeList)
    this.getNoticeList()
    var timer = setInterval(() => {
      if (this.$socket) {
        clearInterval(timer)
        this.$socket.on('custom_group_unread', (data) => {
          var _data = JSON.parse(data)
          if (_data.groupId == 0) {
            this.getNoticeList()
          }
        })
      }
    }, 10)
  }
}
</script>
<style scoped>
.dt-chat-system {
  display: flex;
  flex: 1;
  flex-direction: column;
  background: #fff;
  overflow: auto;
  padding: 14px;
}
.dt-system-messlist {
  width: 420px;
  margin: 50px auto;
}
.dt-system-messbox {
  padding: 12px 0;
  background-color: #fff;
  position: relative;
  margin-bottom: 50px;
}
.dt-system-messbox span {
  position: absolute;
  top: -25px;
  left: 150px;
  width: 120px;
  font-size: 12px;
  color: #909399;
  text-align: center;
}
.dt-system-messbox h2 {
  font-size: 16px;
  font-weight: normal;
  padding: 0 12px;
}
.dt-system-messbox p {
  color: #606266;
  line-height: 20px;
  padding: 12px;
}
.dt-system-messbtn {
  border-top: 1px solid #e1e6f0;
  padding: 12px 12px 0;
  text-align: right;
}
/* table */
.dt-talk-title {
  height: 50px;
  border-bottom: 1px solid #e1e6f0;
  line-height: 50px;
  padding: 0 16px;
  background: #fff;
}
.dt-talk-title span {
  font-size: 16px;
  color: #1f1f1f;
}
.dt-chat-system .dt-chat-table {
  flex: 1;
}

.dt-chat-system >>> .el-table th.el-table__cell {
  color: #909399;
  background: #fafafa;
  font-weight: bold;
  font-size: 14px;
  padding: 8px 0;
}
.dt-chat-system >>> .el-button.is-disabled {
  color: #606266;
  font-size: 14px;
}
.dt-chat-system >>> .el-table__body td.el-table__cell {
  padding: 3.5px 0;
  font-size: 14px;
  color: #1f1f1f;
}

.dt-chat-table >>> .el-button {
  color: #597ef7;
}
.pagination {
  padding: 20px 0px 20px;
  text-align: center;
}
</style>
